<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图百分比</title>
    <style>
        .box {
            width:1000px;
            height:500px;
            border: 1px solid #cccccc;
            background:url("../images/06-bg.png") no-repeat 25% bottom / 800px 300px;
            /* background:url("../images/06-bg.png") no-repeat 0 bottom / 800px 300px;  注意两者的区别 向右移动了 */
            /* 1. 背景图的百分比不是按照容器的大小去换算的  注意！！！ */
            /* 2. 百分比的背景定位， 基于 容器的宽度 - 背景的宽度 */
            /* 3. 计算公式：背景的 X 的定位 = （容器的宽度 - 背景的宽度）* 百分比 */
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>